import React, { useEffect, useState } from 'react'
import { Table, Button, Tag, notification } from 'antd'
import { BulbFilled } from "@ant-design/icons"
import http from '../../../util/http'
function AuditList(props) {
    const [dataSource, setdataSource] = useState([])
    const { username } = JSON.parse(localStorage.getItem("token"))
    useEffect(() => {
        http.get(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`).then(res => {
            console.log(res.data);
            setdataSource(res.data)
        })
    }, [])
    const btns = ["发布", "更新", "撤销"];
    const columns = [{
        title: "新闻标题",
        dataIndex: "title",
        render: (title, item) => {
            return <a href={`/news-manage/preview/${item.id}`} > {title}</a >
        }
    }, {
        title: "作者",
        dataIndex: "author"
    }, {
        title: "新闻分类",
        dataIndex: "category",
        render: (category) => {
            return category.title
        }
    }, {
        title: "审核状态",
        dataIndex: "auditState",
        render: (auditState) => {
            const auditList = ["草稿箱", "审核中", "已通过", "未通过"]
            const colorList = ["", "orange", "green", "red"]
            return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
        }
    }, {
        title: "操作",
        render: (item) => {
            return <div>
                {item.auditState === 1 && <Button type='primary' onClick={() => handleRevoke(item)}>{btns[2]}</Button>}
                {item.auditState === 2 && <Button type='primary' style={{ background: 'rgba(255, 0, 0, .8)', border: "none" }}
                    onClick={() => handleRelease(item)}>{btns[0]}</Button>}
                {item.auditState === 3 && <Button type='primary' style={{ background: 'rgba(144, 30, 210, .7)', border: "none" }}
                    onClick={() => handleUpdate(item)}
                >{btns[1]}</Button>}
            </div>
        }
    }]
    /* 撤销操作 */
    const handleRevoke = (item) => {
        setdataSource(dataSource.filter(data => data.id !== item.id))
        http.patch(`/news/${item.id}`, {
            auditState: 0
        })
        notification.info({
            message: `通知`,
            description:
                `您可以到草稿箱中查看你的新闻`,
            placement: "bottomRight",
            style: {
                color: '#33ff00'
            },
            icon: <BulbFilled style={{ color: '#ffff33' }} />
        });
    }
    /* 更新操作 */
    const handleUpdate = (item) => {
        props.history.push(`/news-manage/update/${item.id}`)
    }
    /* 发布操作 */
    const handleRelease = (item) => {
        http.patch(`/news/${item.id}`, {
            publishState: 2,
            publishTime: Date.now()
        }).then(res => {
            props.history.push("/publish-manage/published")
            notification.info({
                message: `通知`,
                description:
                    `您可以到【发布管理/已发布】中查看你的新闻`,
                placement: "bottomRight",
                style: {
                    color: '#33ff00'
                },
                icon: <BulbFilled style={{ color: '#ffff33' }} />
            });
        })
    }
    return (
        <div>

            <Table dataSource={dataSource} columns={columns}
                rowKey={item => item.id}
                pagination={{
                    pageSize: 5
                }}
            />;
        </div>
    )
}
export default AuditList
